<template>
	<el-form ref="form" :model="form" :label-width="labelWidth" size="small" @submit.native.prevent :label-position="labelPosition" :rules="rules">
		<el-form-item v-for="item in formNewList" :key="item.name" :label="item.label" :prop="item.name">
			<template v-if="item.type === 'input'">
			  <el-input :maxlength="item.maxlength" :minlength="item.maxlength || 0" v-model="form[item.name]" @blur="inputBlur(item)"></el-input>
			</template>
			<el-radio-group v-model="form[item.name]" v-else-if="item.type === 'radio'">
				<el-radio :label="one.value" :class="item.class" v-for="(one, index) in item.data" :key="index">{{one.label}}</el-radio>
			</el-radio-group>
			<optionsConfig v-else-if="item.type === 'optionsConfig'" defaultValue="defaultValueCheckbox" :value="form" :type="item.configData"></optionsConfig>
			<template v-else-if="item.type === 'select'">
				<el-select v-model="form[item.name]" style="width:100%" :filterable="true" :disabled='item.disabled' :multiple="item.multiple">
					<el-option v-for="(one, index) in item.data" :key="index" :label="one.label" :value="one.value">
					</el-option>
				</el-select>
			</template>
		</el-form-item>
	</el-form>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { trim } from 'lodash';
import optionsConfig from '../baseComponents/optionsConfig.vue';
@Component({
  name: 'checkboxPropertyPanel',
  components: {
    optionsConfig
  },
  filters: {
  }
})
export default class extends Vue {
  [x: string]: any;
  @Prop(Object) public form!: any;
  @Prop(Object) public rules!: any;
  @Prop(Array) public fieldsList!: any;
  @Prop(Array) public formList!: any[];
  @Prop({ default: '80px' }) public labelWidth!: string;
  @Prop({ default: 'top' }) public labelPosition!: string;

  private get formNewList () {
    if (this.form.checkboxType === 1) {
      return this.formList.filter(item => {
        return item.name !== 'arrangeType'
      })
    } else {
      return this.formList
    }
  }

  @Emit('blur')
  private inputBlur (item) {
    this.form[item.name] = trim(this.form[item.name]);
    return item;
  }
}
</script>
<style scoped lang='stylus'>
</style>
